$(function() {

    let img = $('#image');
    //设置裁剪的属性
    let option = {
        aspectRatio: 1,
        preview: '.img-preview'
    }

    //图片回显

    let user = JSON.parse(localStorage.getItem('user'));

    img.attr('src', user.user_pic); //设置图片地址
    img.cropper(option); //初始化裁剪区

    //绑定文件上传事件
    $('#btnChooseImage').on('click', function() {
        $('#file').click();

    })
    //当input改变，修改当前图片
    $('#file').on('change', function(e) {
        let files = e.target.files; //获取当前上传文件，为数组形式
        if (files.length == 0) {
            return;
        } //当没有上传文件，直接跳出
        let file = files[0]; //获取选择的图片
        let imgURL = URL.createObjectURL(file); //将图片转为url地址
        localStorage.setItem('imgurl', imgURL);
        //重新设置裁剪区
        img.cropper('destroy'); //销毁当前裁剪区
        img.attr('src', imgURL); //设置图片地址
        img.cropper(option); //重新初始化裁剪区
    })

    //绑定修改事件
    $('#btnCreateAvatar').on('click', function() {
        var imgdata = img.cropper('getCroppedCanvas', {
            width: 100,
            height: 100
        }).toDataURL('image/png'); //将图片裁剪区转为base64格式字符串
        //调用api更新头像
        $.ajax({
            method: 'POST',
            url: '/my/update/avatar',
            data: {
                avatar: imgdata
            },
            success: function(result) {
                if (result.status == 0) {
                    //更换首页的用户头像
                    $('#user_pic', parent.document).attr('src', imgdata);
                    alert('更新成功！');
                }


            }

        })

    })


});
